<template>
  <div class="notice">
    <breadcrumb title="我的通知" homePath="/student" />
    <el-card>
      <h1>我的通知</h1>

      <!-- 通知 -->
      <el-table :data="allNoticeData" stripe style="width: 100%" border>
        <template slot="empty">
          <p>{{ emptyText }}</p>
        </template>
        <el-table-column prop="n_id" label="序列号" width="100" />
        <el-table-column prop="title" label="主题" />
        <el-table-column label="内容">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <p :class="{ active: values[scope.row.n_id] }">
              {{ scope.row.n_id | filterStatus(readedNoticeList) }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="170">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              :type="values[scope.row.n_id] ? 'primary' : 'info'"
              round
              @click="toggleReadStatus(scope.row.n_id)"
            >
              {{ values[scope.row.n_id] ? "我还没读" : "完成阅读" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allNoticeNum"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from "components/Breadcrumb";
import { getNotice } from "network/student/getNotice";
import { getNoticeRead } from "network/student/getNoticeRead";
import { goUnRead } from "network/student/goUnRead";
import { goReaded } from "network/student/goReaded";

export default {
  name: "Notice",
  components: {
    Breadcrumb,
  },
  data() {
    return {
      allNoticeData: [],
      emptyText: "",
      readedNoticeList: [],
      values: {},
      allNoticeNum: 0,
      queryInfo: {
        currPage: 1,
        pageSize: 2,
      },
      readIdList: [],
    };
  },
  created() {
    this.$store.commit("setCurrentIndex", {
      type: "studentCurrentIndex",
      index: 0,
    });
    this.getNotice();
    this.getNoticeRead();
    if (this.allNoticeNum == 0) {
      this.emptyText = "暂无数据";
    }
  },
  filters: {
    filterStatus(n_id, readedNoticeList) {
      let flag = false;
      for (let item of readedNoticeList) {
        // console.log(item);
        if (item.n_id == n_id) {
          flag = true;
          break;
        }
      }
      return flag ? "已读" : "未读";
    },
  },
  methods: {
    // 获取所有相关通知
    async getNotice() {
      let token = window.sessionStorage.getItem("token");
      let { currPage, pageSize } = this.queryInfo;
      const res = await getNotice({
        token,
        currPage,
        pageSize,
      });
      this.allNoticeData = res.data;
      this.allNoticeNum = res.total;
    },
    // 获取所有已读消息
    async getNoticeRead() {
      let token = window.sessionStorage.getItem("token");
      let res = await getNoticeRead({ token });
      this.readedNoticeList = res;
      // 存储已读Id
      this.values = {};
      res.forEach((item) => {
        this.values[item.n_id] = true;
      });
      // console.log(this.values);
    },
    // 处理改变一页的数量
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getNotice();
    },
    // 处理改变页码
    handleCurrentChange(newPage) {
      this.queryInfo.currPage = newPage;
      this.getNotice();
    },
    // 切换阅读转态
    async toggleReadStatus(n_id) {
      let token = window.sessionStorage.getItem("token");
      let status = this.values[n_id];
      let res;
      if (status) {
        res = await goUnRead({ token, n_id });
      } else {
        res = await goReaded({ token, n_id });
      }
      this.getNotice();
      this.getNoticeRead();
      this.$message.success(res);
    },
  },
};
</script>

<style lang="less" scoped>
.notice {
  .el-card {
    h1 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      text-align: center;
    }
    .el-pagination {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    p {
      color: #909399;
    }
    p.active {
      color: #409eff;
    }
  }
}
</style>